src/app/onboarding/_components/kpi-step.tsx (2)

23-45: Use explicit type imports for events and clarify numeric validation behavior

handleAbsoluteGoalChange / handleRelativeGoalChange use React.ChangeEvent without importing the type, relying on the global React namespace and mixing manual regex with a type="number" input. To align with typical consistent-type-imports setups and keep intent clear, consider importing the event type and tightening the validation story:

import { useState, type ChangeEvent } from "react";

const handleAbsoluteGoalChange = (e: ChangeEvent<HTMLInputElement>) => {
  const value = e.target.value;
  // currently allows "", "123", "123.45", and also just "."
  if (value === "" || /^\d*\.?\d*$/.test(value)) {
    setAbsoluteGoal(value);
  }
};

Also double‑check that allowing a lone "." is intentional and that future parsing to a number accounts for this case to avoid NaN.

---

259-283: Consider gating “continue” on KPI completeness

Right now “continue” always calls onNext regardless of whether a metric name, data source, or goal has been entered, while “skip for now” is also available. To avoid accidental empty KPIs, consider disabling “continue” until a minimal set of fields (e.g., metric name and either absolute or relative goal) is present, and reserve “skip for now” for intentionally bypassing this step.

src/app/onboarding/_components/import-members-step.tsx (1)

84-121: Align Slack “COMING SOON” state with selection and continue behavior

Slack is labeled “COMING SOON” but is still fully selectable and enables the “continue” CTA, making it indistinguishable in behavior from Google Workspace. This can confuse users into thinking Slack import is available.

Consider either:

• Disabling the Slack button (and not letting it satisfy selectedIntegration) while it’s “coming soon”, or
• Handling Slack as a separate code path (e.g., toast / modal explaining it’s not yet available) and keeping continue gated only on supported integrations.

Also applies to: 139-146

src/app/onboarding/layout.tsx (1)

1-13: Prefer importing ReactNode as a type instead of using React.ReactNode

To keep type usage explicit and align with typical @typescript-eslint/consistent-type-imports setups, consider importing ReactNode rather than relying on the global React namespace:

import { type Metadata } from "next";
import type { ReactNode } from "react";

export default function OnboardingLayout({
  children,
}: {
  children: ReactNode;
}) {
  return <div className="bg-background min-h-screen">{children}</div>;
}

This keeps all external types coming from explicit imports and avoids depending on ambient React globals.

src/app/onboarding/_components/finish-step.tsx (1)

12-15: Avoid hard‑coding mockTeamId in the final CTA

mockTeamId is currently hard‑coded to "demo-team" and used in the final CTA link. That’s fine for a UI‑only prototype, but easy to forget once you wire up real data.

Before shipping beyond a demo context, consider:

• Passing a real teamId (and possibly team name) via props or context, and
• Falling back gracefully (e.g., disabling the CTA or routing to a safe default) if no team has been created yet.

This will prevent the “open role canvas” button from silently routing to an invalid or demo route in production.

Also applies to: 100-115

src/app/onboarding/_components/progress-indicator.tsx (1)

10-51: Optional: add ARIA semantics to improve progress accessibility

The animated dot indicator works visually, but it’s currently just a bare <div> for assistive tech. Consider wrapping it with appropriate ARIA semantics (e.g., role="group" / aria-label on the container, or a role="progressbar" with aria-valuenow/aria-valuemax) so screen readers can convey onboarding progress as well.

src/app/onboarding/page.tsx (1)

32-93: Well-structured layout with synchronized step transitions.

The split-screen layout and AnimatePresence integration work well together. The step synchronization between left and right panels is clean.

However, consider the following enhancements:

1. Data persistence: While the PR scope is UI-only, user progress is lost on page refresh. Consider adding localStorage to persist step data and current step for better UX.

2. Accessibility: The onboarding flow lacks keyboard navigation hints, ARIA labels, and focus management:

   • Add aria-label to the progress indicator
   • Add role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax attributes
   • Manage focus when transitioning between steps
   • Consider adding keyboard shortcuts (e.g., Ctrl+→ for next, Ctrl+← for back)

3. Error boundaries: Wrap step components in an error boundary to gracefully handle rendering failures.

src/app/onboarding/_components/step-visuals.tsx (5)

12-73: Consider using theme colors instead of hardcoded RGB values.

Lines 28-29 use hardcoded rgb(60, 60, 55) for the grid background. This breaks theme consistency and won't adapt to theme changes.

Consider using Tailwind theme colors or CSS custom properties:

-            linear-gradient(rgb(60, 60, 55) 1px, transparent 1px),
-            linear-gradient(90deg, rgb(60, 60, 55) 1px, transparent 1px)
+            linear-gradient(rgb(var(--border)) 1px, transparent 1px),
+            linear-gradient(90deg, rgb(var(--border)) 1px, transparent 1px)

Or use a Tailwind utility class approach if the pattern is reused.

---

75-170: LGTM! Orbiting nodes visualization is mathematically sound.

The circular positioning using trigonometry is correctly implemented with 6 nodes at 60-degree intervals. The SVG connection lines animate nicely.

One optional note: The SVG positioning (lines 125-128) uses magic numbers that could be extracted to constants if this pattern is reused elsewhere, but it's fine for a one-off visual.

---

346-466: Refactor hardcoded theme colors for consistency.

Lines 369, 420, 425, and 440 use hardcoded rgb(142, 157, 172) which breaks theme consistency and won't adapt to theme changes.

Extract the color to a CSS custom property or Tailwind theme color:

-            style={{ backgroundColor: "rgb(142, 157, 172)" }}
+            className="bg-chart-line"

And define in your Tailwind config or use an existing theme color.

Additionally, the SVG path generation (lines 431, 438) is complex and hard to maintain. Consider extracting it to a helper function:

const createChartPath = (dataPoints: number[], width: number, height: number) => {
  const xStep = width / (dataPoints.length - 1);
  const points = dataPoints.map((p, i) => `L${i * xStep},${height - p * 0.5}`).join(" ");
  return `M0,${height - dataPoints[0] * 0.5} ${points}`;
};

---

468-623: LGTM! Celebration visual effectively conveys completion.

The network diagram with animated connections and spring-animated checkmark provides a satisfying conclusion to the onboarding flow.

The positioning coordinates are hardcoded but acceptable for a static decorative visual. If this pattern is reused, consider extracting node positions to a configuration object.

---

12-623: Add accessibility attributes for decorative visuals.

All six visual components are purely decorative and should be hidden from assistive technologies to avoid confusing screen reader users.

Add aria-hidden="true" to the root motion.div of each visual component:

  <motion.div
+   aria-hidden="true"
    variants={containerVariants}
    initial="initial"
    animate="animate"

Apply this to all six visuals: OrgNameVisual, ImportMembersVisual, TeamSetupVisual, RoleCreationVisual, KpiVisual, and FinishVisual.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-02T13:36:55.215Z
Learning: Applies to src/components/ui/**/*.tsx : Use shadcn/ui CLI from `components.json` configuration to add new UI components instead of manual copying

Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-02T13:36:55.215Z
Learning: Applies to src/app/**/components/**/*.tsx : Define custom React Flow nodes in a `_components/` folder within the feature directory and style them with the `BaseNode` component from the shared library